<script setup lang="ts">
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
import ReTable from "@/components/ReTable/index.vue";
import ReHeaderSearch from "@/components/ReHeaderSearch/index.vue";
import ReNewDialog from "@/components/ReNewDialog/index.vue";
import { useSettingStoreHook } from "@/store/modules/settings";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules
} from "element-plus";
import type { Action } from "element-plus";
defineOptions({
  name: "userAddressList"
});
interface ValueType {
  val: {
    buttonType: string;
  };
  row: object;
}
interface UserAddressType {
  user_id: string;
  consignee: string;
  consignee_mobile: string;
  province: string;
  city: string;
  area: string;
  detail_address: string;
}
const pureSetting = useSettingStoreHook();
const dialogViewVisible = ref(false);
const deleteModal = () => {
  ElMessageBox.confirm("确定要删除此用户收货地址吗?", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch((action: Action) => {
      ElMessage({ type: "info", message: "取消删除" });
    });
};
watch(
  () => pureSetting.buttonInfo,
  (newValue, oldValue) => {
    if (Object.keys(newValue).length !== 0) {
      let value = newValue as ValueType;
      switch (value.val.buttonType) {
        case "delete":
          deleteModal();
          break;
        case "edit":
          dialogViewVisible.value = true;
          break;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const userAddressForm = reactive<UserAddressType>({
  user_id: "4955",
  consignee: "",
  consignee_mobile: "",
  province: "",
  city: "",
  area: "",
  detail_address: ""
});
const rules = reactive<FormRules<UserAddressType>>({
  user_id: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
  consignee: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  consignee_mobile: [
    { required: true, message: "请输入收货人手机号", trigger: "blur" }
  ],
  province: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  city: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  area: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  detail_address: [
    { required: true, message: "请输入收货人姓名", trigger: "blur" }
  ]
});
const ruleFormRef = ref<FormInstance>();

const handleGetDeleteIds = (ids: string) => {
  console.log(ids);
};
const handleCloseDialog = () => {
  console.log("关闭弹窗");
  resetForm(ruleFormRef.value);
};
const handleConfirmDialog = () => {
  console.log("确认弹窗");
  submitForm(ruleFormRef.value);
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      resetForm(formEl);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogViewVisible.value = false;
};
</script>
<template>
  <div class="user-address-list-container">
    <el-card shadow="hover" class="mb-2">
      <ReHeaderSearch tableType="userAddressList" />
    </el-card>
    <ReTable
      type="userAddressList"
      class="content-body"
      @delete="handleGetDeleteIds"
    />
    <ReNewDialog
      :visible="dialogViewVisible"
      dialogTitle="修改用户收货地址信息"
      @close="handleCloseDialog"
      @confirm="handleConfirmDialog"
    >
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="userAddressForm"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="所属用户" prop="user_id">
            <el-input v-model="userAddressForm.user_id" disabled />
          </el-form-item>
          <el-form-item label="收货人姓名" prop="consignee">
            <el-input
              v-model="userAddressForm.consignee"
              placeholder="请输入收货人姓名"
            />
          </el-form-item>
          <el-form-item label="收货电话" prop="consignee_mobile">
            <el-input
              v-model="userAddressForm.consignee_mobile"
              type="number"
              placeholder="请输入收货人手机号"
            />
          </el-form-item>
          <el-form-item label="省" prop="province">
            <el-input
              v-model="userAddressForm.province"
              placeholder="请输入省"
            />
          </el-form-item>
          <el-form-item label="市" prop="province">
            <el-input
              v-model="userAddressForm.city"
              type="text"
              placeholder="请输入市"
            />
          </el-form-item>
          <el-form-item label="区" prop="province">
            <el-input
              v-model="userAddressForm.area"
              type="text"
              placeholder="请输入区"
            />
          </el-form-item>
          <el-form-item label="详细地址" prop="province">
            <el-input
              v-model="userAddressForm.detail_address"
              placeholder="请输入详细地址"
            />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
  </div>
</template>
